// var vm = new Vue({
//     el: '#app',
//     data: {
//         taskName: '',//保存输入框中的任务名称
//         tasklist: [
//             // 保存新增的任务
//             // {id:1,name:'李清照',status:flase}
//         ]
//     },
//     methods: {
//         addTask() {
//             // 构建一个新的任务对象，status属性表示任务的状态(true 已完成 ; false 未完成)
//             var obj = { id: this.tasklist.length + 1, name: this.taskName, status: false };
//             this.tasklist.push(obj);//添加到任务列表中
//             this.taskName = '';//清空输入框
//         },
//         changeStatus(item) {//更改当前任务的状态
//             item.status = !item.status;
//         },
//     },
//     computed: {
//         unFinishCount() {//统计未完成任务的数量
//             var arr = this.tasklist.filter((item) => {
//                 return item.status == false;
//             })
//             return arr.lenght;
//         }
//     }
// })

var vm = new Vue({
    el: '#app',
    data: {
        taskName: '',//保存输入框中的任务名称
        tasklist: [
            /* { id: 1 , name:'李清照' , status:false } */
        ] //保存新增的任务
    },
    methods: {
        addTask() {
            //构建一个新的任务对象,status属性表示任务的状态(true 已完成; false 未完成)
            var obj = { id: this.tasklist.length + 1, name: this.taskName, status: false };
            this.tasklist.push(obj);//添加到任务列表中
            this.taskName = '';//清空输入框
        },
        changeStatus(item) {//更改当前任务的状态
            item.status = !item.status;
        },
        del(item, index) {
            this.tasklist.splice(index, 1);
        }
    },
    computed: {
        unFinishCount() {//统计未完成任务的数量
            var arr = this.tasklist.filter((item) => {
                return item.status == false;
            })
            return arr.length;
        }
    }
})